<template>
  <Dialog v-model="visible" :title="title">
    <Form :model="form" :rules="rules" ref="formRef" label-width="auto" :column="2">
      <FormItem label="资源名称" prop="permsName" required>
        <el-input v-model="form.permsName" :readonly="readonlyFalg"/>
      </FormItem>
      <FormItem label="权限码" prop="permsCode">
        <el-input v-model="form.permsCode" :readonly="readonlyFalg"/>
      </FormItem>
      <FormItem label="资源类型" prop="permsType" required :span="2">
        <el-radio-group v-model="form.permsType" :disabled="readonlyFalg">
          <el-radio :value="1">菜单</el-radio>
          <el-radio :value="2">按钮</el-radio>
        </el-radio-group>
      </FormItem>
      <FormItem label="资源链接" prop="path" required :span="2">
        <el-input v-model="form.path" :readonly="readonlyFalg"/>
      </FormItem>
    </Form>

    <template #footer v-if="!readonlyFalg">
      <el-button @click="visible = false" type="danger">取消</el-button>
      <el-button @click="submit" type="primary">确认</el-button>
    </template>
  </Dialog>
</template>



<script setup lang="ts">

  import {ref, unref, nextTick, watch, reactive, computed} from 'vue'
  import { ElForm,  ElFormItem, ElInput, ElRadioGroup , ElRadio, ElButton, FormRules} from 'element-plus'
  import { Dialog, Form, FormItem } from "@/components";
  import { listToTree } from '@/utils'
  import type { MenuEditParams } from '@/api/system/menu/types'
  import { MenuRes } from '@/api/system/menu/types'
  import { queryDetailApi, savePermissionApi, updatePermissionApi  } from '@/api/system/permission'
  import { PermissionEditParams } from '@/api/system/permission/types'
  const emit = defineEmits<{
    (e: 'submit')
  }>()

  const visible = ref(false)
  const title = computed(() => {
    return readonlyFalg.value ? '查看详情' : (permissionId.value ? '编辑' : '新增')
  })
  // 是否只读
  const readonlyFalg = ref(false)
  const permissionId = ref<number>()
  const form = ref<PermissionEditParams>()
  const formRef = ref<InstanceType<typeof ElForm>>()
  

  const initData = async () => {
    if (permissionId.value) {
      form.value = (await queryDetailApi({ permissionId: permissionId.value })).data
    } else {
      form.value = {
        permissionId: undefined,// 资源ID
        permsName: undefined,   // 资源名称
        permsCode: undefined,   // 权限码
        permsType: 1,           // 权限类型
        path: undefined,        // 接口地址
      }
    }
  }
  initData()

  const rules = reactive<FormRules<PermissionEditParams>>({
    permsName: [
      { required: true, message: '资源名称不能为空', trigger: 'blur' },
    ],
    permsType: [
      { required: true, message: '资源类型不能为空', trigger: 'blur' },
    ],
  })


  const submit = async () => {
    await formRef.value.validate(async (valid, fields) => {
      if (valid) {
        if (permissionId.value) {
          await updatePermissionApi(form.value)
        } else {
          await savePermissionApi(form.value)
        }
        emit('submit')
        visible.value = false
      } 
    })
  }

  const openDialog = (id?: number, readonly = false) => {
    permissionId.value = id
    initData()
    readonlyFalg.value = readonly
    visible.value = true
  }

  defineExpose({
    openDialog
  })
</script>
